<template>
  <div>
    <el-form :model="billData" :rules="rules" ref="form" label-width="0px" class="demo-curData" :inline="true">
      <div class="reset-zero">
        <el-button type="primary" @click="resetForm()" v-if="hasPermission('909390476')">
          一键重置为零
        </el-button>
      </div>
      {{ billData }}
      <div class="title">代理信用账单详情</div>
      <!-- <div class="contentBox mt30">
				{{ dayjs(String(curData.cycleStartDate)).format('YYYY-MM-DD') }}
				00:00:00 至
				{{ dayjs(String(curData.cycleEndDate)).format('YYYY-MM-DD') }}
				23:59:59
			</div> -->

      <TeamBillTable :data.sync="proxyTeamBill" />

      <!-- 本期代理团队应收/应付上级明细 -->
      <DetailsTable :data.sync="proxyTeamBill" />

      <!-- 本期团队盈亏 -->
      <ProfitTable :data.sync="proxyTeamBillDetail" />

      <!-- 其他资金变动 -->
      <OtherAmountChangeTable :data.sync="proxyTeamBillDetail" />

      <!-- 代理占城交收账单详情 -->
      <ZcCurTable :data.sync="proxyTeamBillDetail" />
      <!-- 本期团队占成交收详情 -->
      <TheAccounted :data.sync="proxyTeamBillDetail" />
      <!-- 本期分红 -->
      <DividendsCurrentPeriod :fhList.sync="proxyFenHongDetails" :fhInfo.sync="proxyFenHongRecord" />

      <div class="footer">
        <el-button type="primary" @click="submitForm('form')" :loading="submitLoading">
          提交修改
        </el-button>
      </div>
    </el-form>

    <GoogleKeyInput :isShowdialog="isShowdialog" @getGoogleKey="getGoogleKey($event)" @backPrevStep="backPrevStep()">
    </GoogleKeyInput>
  </div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import res from '../mock'
export default {
  components: {
    GoogleKeyInput: () => import('@/components/GoogleKeyInput'),
    TeamBillTable: () => import('./teamBillTable.vue'),
    DetailsTable: () => import('./detailsTable.vue'),
    // eslint-disable-next-line vue/no-unused-components
    ProfitTable: () => import('./profitTable.vue'),
    OtherAmountChangeTable: () => import('./otherAmountChangeTable.vue'),
    TheAccounted: () => import('./theAccounted.vue'),
    DividendsCurrentPeriod: () => import('./dividendsCurrentPeriod.vue'),
    // 占成
    ZcCurTable: () => import('./zcCurTable.vue')
  },
  mixins: [list],
  props: {
    value: {
      type: Object,
      default: () => { }
    },
  },
  data() {
    return {
      dayjs,
      submitLoading: false,
      proxyTeamBill: {},
      proxyTeamBillDetail: {},
      loading: false,
      isShowdialog: false,
      rules: {},
      proxyFenHongDetails: [],
      proxyFenHongRecord: {},
    }
  },
  computed: {
    billData() {
      return {
        proxyFenHongDetails: [],
        proxyFenHongRecord: {},
        proxyTeamBill: this.proxyTeamBill,
        proxyTeamBillDetail: this.proxyTeamBillDetail
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getGoogleKey(data) {
      this.isShowdialog = false
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.submitLoading = true
      this.$api.getBillUpdate({
        proxyTeamBill: this.proxyTeamBill,
        proxyTeamBillDetail: this.proxyTeamBillDetail,
        proxyFenHongRecord: null,
        proxyFenHongDetails: null,
        googleAuthCode: data
      }).then((res) => {
        loading.close()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.$emit('success')
        this.submitLoading = false
      })
        .catch((e) => {
          loading.close()
          this.submitLoading = false
        })
    },
    backPrevStep() {
      this.isShowdialog = false
    },
    resetForm() {
      console.log(this.$refs['form'])
      this.getData()
    },
    // 提交修改
    submitForm(formName) {
      this.isShowdialog = true
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },

    async queryData(params) {
      try {
        const res = await this.$api.getBillAdjust(params)
        this.proxyTeamBill = res.data.proxyTeamBill
        this.proxyTeamBillDetail = res.data.proxyTeamBillDetail
      } catch (err) {
        console.log(err)
      }
    },
    getData() {
      const resData = res.data

      const proxyTeamBill = { ...resData.proxyTeamBill }
      // proxyTeamBill['name'] = 'proxyTeamBill'
      this.proxyTeamBill = proxyTeamBill

      const proxyTeamBillDetail = { ...res.data.proxyTeamBillDetail }
      // proxyTeamBillDetail['name'] = 'proxyTeamBillDetail'
      this.proxyTeamBillDetail = proxyTeamBillDetail


      this.proxyFenHongDetails = [...resData.proxyFenHongDetails]
      this.proxyFenHongRecord = { ...resData.proxyFenHongRecord }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-icon-question:after {
  font-size: 16px;
  margin-left: 0;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

.reset-zero {
  display: flex;
  justify-content: flex-end;
}

.title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
}

.footer {
  display: flex;
  justify-content: flex-end;
}

.contentBox {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.childer-box {
  width: 100%;
  display: flex;

  .silder {
    width: 25%;
    padding-right: 20px;

    .row {
      margin-top: 20px;

      .switch {
        cursor: pointer;
      }
    }

    .display-tow {
      display: flex;
      justify-content: space-between;
    }

    .lower-user {
      padding-left: 30px;
      margin-top: 10px;
      box-sizing: border-box;

      .list {
        padding: 5px 0;
      }

      .active {
        background: rgba(129, 211, 248, 1);
        color: #ffffff !important;
      }
    }
  }

  .table-content {
    width: 100%;
  }
}
</style>
